import React from 'react';
import ReactDOM from 'react-dom/client';

// 通过 index.html 中 id 是 root 的 div 标签，创建一个root
const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);

// 一个页面中必须要有一个根组件
function App(){
  return<>
  <h1> 虚拟 DOM</h1>
  <div>一个 html 标签就是一个 dom</div>
  <div>所谓的虚拟 DOM 就是一个假的 DOM</div>
  <div>一个假的 dom 就是一个假的 html 标签</div>
  <div>是通过 js 对象描述的标签，叫做虚拟 DOM</div>
  </>
}

// 虚拟 DOM 是什么
// 虚拟 DOM 就是通过对象描述一个 DOM 元素

// 为什么要使用虚拟DOM
// 因为虚拟 DOM 可以减少真实 DOM 的操作，从而提升性能

// react 更新算法
// diff: 对比新老 DOM 找出有变化的地方，只更新变化的地方，做到小的区域更新，提升性能
// fiber: 对比新老 DOM 找出有变化的地方，只更新变化的地方，做到小的区域更新，提升性能

function Bpp() {
  return React.createElement('h1',{ id : 'title'},[
    'Hello World',
    React.createElement('a',{ href: 'https://www.baidu.com' },'World')
  ]);
  // return <h1 id='title'>敢为露在何方</h1>
}


// 将 App 组件渲染到 id 为 root 的 div 标签上
root.render(
  <Bpp />
);

